<template>
  <div>
    <table class="tb">
      <tr>
        <td>欢迎光临，vue开发的收银系统——水果店</td>
      </tr>
      <tr><th>苹果10￥/斤，折扣8折</th></tr>
      <tr><td>  请输入你要购买的斤数<input type="number" v-model="num"></td></tr>
      <tr><td><button @click="addFn">结账买单~</button></td></tr>
      <tr><td>结账单：总价：<span>{{total}}</span>￥元 折后价：<span>{{price}}</span>￥省了：<span>{{reduced}}</span>￥元</td></tr>
        
      
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:0,
      total:0,
      price:0,
      reduced:0
    }
  },
  methods:{
    addFn(){
      this.total=this.num*10
      this.price=this.total*0.8
      this.reduced=this.total-this.price
    }
  }
}
</script>

<style>
.tb {
  border-collapse: collapse;
  width: 50%;
}
.tb th {
  background-color: #0094ff;
  color: white;
}
.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>
>
